<template>
  <el-form class="fillup-student" ref="form" :model="formData" :rules="rules">
    <el-form-item prop="name">
      <el-input v-model="formData.name" :placeholder="$tInput('student.name')">
        <template #prefix>
          <SvgIcon name="xingming" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="sex">
      <el-select v-model="formData.sex" :placeholder="$tSelect('student.sex')">
        <template #prefix>
          <SvgIcon name="tubiaohezi-hisxitongtubiao-" />
        </template>
        <el-option
          v-for="item in $enumList('GENDER')"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item prop="birthday">
      <el-date-picker
        v-model="formData.birthday"
        type="date"
        :placeholder="$tSelect('student.birthday')"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item prop="academicSession">
      <el-input
        v-model="formData.academicSession"
        :placeholder="$tInput('student.academicSession')"
      >
        <template #prefix>
          <SvgIcon name="xuesheng" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="graduationDate">
      <el-date-picker
        v-model="formData.graduationDate"
        type="date"
        :placeholder="$tSelect('student.graduationDate')"
      />
    </el-form-item>
    <el-form-item prop="major">
      <el-input
        v-model="formData.major"
        :placeholder="$tInput('student.major')"
      >
        <template #prefix>
          <SvgIcon name="zhuanye" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="studentNumber">
      <el-input
        v-model="formData.studentNumber"
        :placeholder="$tInput('student.studentNumber')"
      >
        <template #prefix>
          <SvgIcon name="xuehao" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="parties">
      <el-select
        v-model="formData.parties"
        :placeholder="$tSelect('student.parties')"
      >
        <template #prefix>
          <SvgIcon name="wudangpairenshi" />
        </template>
        <el-option
          v-for="item in dictData['politic_type']"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="text-left">
      <div class="upload-label">请上传您的身份证照片：</div>
      <el-row :gutter="10">
        <el-col :span="12">
          <Upload
            :multiple="false"
            v-model="formData.idCardFronts"
            :show-file-list="false"
            single
          >
            <div class="upload-content">
              <img
                class="upload-img"
                :src="formData.idCardFronts[0].url"
                v-if="formData.idCardFronts && formData.idCardFronts.length > 0"
              />
              <template v-else>
                <img
                  class="upload-empty-bg"
                  src="@/assets/img/idCardFronts.png"
                  alt=""
                />
                <div class="upload-empty-content">
                  <div class="upload-empty-icon">
                    <SvgIcon name="camera_full" />
                  </div>
                  <div class="upload-empty-text">请上传您的人面像</div>
                </div>
              </template>
            </div>
          </Upload>
        </el-col>
        <el-col :span="12">
          <Upload
            :multiple="false"
            v-model="formData.idCardBacks"
            :show-file-list="false"
            single
          >
            <div class="upload-content">
              <img
                class="upload-img"
                :src="formData.idCardBacks[0].url"
                v-if="formData.idCardBacks && formData.idCardBacks.length > 0"
              />
              <template v-else>
                <img
                  class="upload-empty-bg"
                  src="@/assets/img/idCardBacks.png"
                  alt=""
                />
                <div class="upload-empty-content">
                  <div class="upload-empty-icon">
                    <SvgIcon name="camera_full" />
                  </div>
                  <div class="upload-empty-text">请上传您的国徽像</div>
                </div>
              </template>
            </div>
          </Upload>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item class="text-left">
      <div class="upload-label">请上传您的身份证照片：</div>
      <el-row :gutter="10">
        <el-col :span="12">
          <Upload
            :multiple="false"
            v-model="formData.idCardHands"
            :show-file-list="false"
            single
          >
            <div class="upload-content">
              <img
                class="upload-img"
                :src="formData.idCardHands[0].url"
                v-if="formData.idCardHands && formData.idCardHands.length > 0"
              />
              <template v-else>
                <img
                  class="upload-empty-bg"
                  src="@/assets/img/idCardHands.png"
                  alt=""
                />
                <div class="upload-empty-content">
                  <div class="upload-empty-icon">
                    <SvgIcon name="camera_full" />
                  </div>
                  <div class="upload-empty-text">请上传您的手持身份证照片</div>
                </div>
              </template>
            </div>
          </Upload>
        </el-col>
        <el-col :span="12">
          <div class="upload-desc">
            照片要求：（需符合以下要求，否则不予审核通过） 1.
            拍摄时，手持本人身份证，将持证的手臂和上半身整个拍进照片，脸部清晰且不能被遮挡；
            2.
            确保身份证上的所有信息清晰可见、完整（没有被遮挡或者被手指捏住）；
            3. 照片内容要求真实有效，不得做任何修改；
          </div>
        </el-col>
      </el-row>
    </el-form-item>
    <el-button
      class="w-100"
      type="primary"
      round
      @click="submitForm"
      :loading="submiting"
      >保存并下一步</el-button
    >
  </el-form>
</template>

<script>
import { dictMixin } from 'mixins'
import { fillup } from 'services/student/auth'
import { mapState } from 'vuex'
import { Upload } from 'components'
export default {
  name: 'FillupSchool',
  mixins: [dictMixin],
  dicts: ['politic_type'],
  components: { Upload },
  data() {
    return {
      formData: {},
      submiting: false,
      captcha: null,
      uuid: null,
      captchaImg: null
    }
  },
  computed: {
    ...mapState(['userInfo']),
    rules() {
      return {
        name: this.$rule('student.name', {
          required: true
        }),
        sex: this.$rule('field.sex', {
          required: true,
          actionType: 'select'
        }),
        birthday: this.$rule('student.birthday', {
          required: true
        }),
        academicSession: this.$rule('student.academicSession', {
          required: true
        }),
        graduationDate: this.$rule('student.graduationDate', {
          required: true
        }),
        major: this.$rule('student.major', {
          required: true
        }),
        studentNumber: this.$rule('student.studentNumber', {
          required: true
        }),
        parties: this.$rule('student.parties', {
          required: true,
          trigger: 'blur'
        }),
        idCardFronts: this.$rule('student.idCardFronts', {
          required: true
        }),
        idCardBacks: this.$rule('student.idCardBacks', {
          required: true
        }),
        idCardHands: this.$rule('student.idCardHands', {
          required: true
        })
      }
    }
  },
  methods: {
    async submitForm() {
      try {
        const valid = await this.$refs.form.validate()
        if (!valid) {
          return
        }
        this.submiting = true
        await fillup(this.formData)
        this.$emit('success')
      } finally {
        this.submiting = false
      }
    }
  },
  created() {
    this.formData = { ...this.userInfo }
  }
}
</script>

<style lang="scss" scoped>
@import 'styles/common.scss';
.upload-label {
  color: $colorText1;
}
.upload-download {
  color: $colorPrimary;
  cursor: pointer;
}
.upload-content {
  width: 3.06rem;
  height: 1.8rem;
  background: #f6f6f6;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #aaa;
  overflow: hidden;
  font-size: 0.18rem;
  position: relative;
  .upload-empty-bg {
    position: absolute;
    width: 100%;
  }
  .upload-empty-content {
    position: absolute;
  }
  .upload-empty-icon {
    @include circle(0.42rem);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: $colorPrimary;
    color: #fff;
  }
  .upload-empty-text {
    // margin-top: 0.23rem;
  }
  .upload-img {
    width: 100%;
  }
}
.upload-desc {
  color: $colorText2;
  font-size: 0.14rem;
  line-height: 1.5em;
}
</style>
